

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="http://img.mabach.cn/element-ui.css">

</head>
<body>
<div id="app">
    <div>
    <h3>埋点日志</h3>
        <p v-text="name"></p>
    <el-button plain @click="collect()">点击收藏(+2)</el-button>
    <el-button type="primary" plain @click="share()" >点击分享(+2)</el-button>
    <el-button type="primary" plain @click="buy()" >下单(+3)</el-button>
    <el-button type="success" plain  @click="pay()" >模拟付款0.01元(+5)</el-button>
    </div>

    <div>
        <h3>相似物品推荐</h3>
    </div>

    <div>
        <el-table :data="searchList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="80"></el-table-column>

            <el-table-column  label="门店图片"  >
                <template slot-scope="scope">
                    <img :src="scope.row.logo" width="160px" height="100px">
                </template>

            </el-table-column>
            <el-table-column prop="name" label="门店名称" ></el-table-column>
            <el-table-column prop="hot" label="店内热销" ></el-table-column>
            <el-table-column prop="remarkScore" label="门店评分" ></el-table-column>
            <el-table-column prop="pricePerMan" label="人就消费" width="100"></el-table-column>
            <el-table-column prop="address" label="地址" ></el-table-column>


        </el-table>
    </div>

</div>

</body>

<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="http://img.mabach.cn/vue.js"></script>
<!-- import JavaScript -->
<script src="http://img.mabach.cn/elementui.js"></script>
<script src="http://img.mabach.cn/axios.js"></script>
<script th:inline="javascript" >
    new Vue({
        el: '#app',
        data : {

            id: [[${id}]],
            searchList:[[${searchList}]],
            name: [[${name}]]




        },




        methods:{
            collect:function () {
                this.$message.success('收藏成功');

                axios.get("/dianping/collect?id="+this.id).then(function (response) {


                })
            },


            share:function () {
                this.$message.success('分享成功');

                axios.get("/dianping/share?id="+this.id).then(function (response) {


                })
            },

            buy:function () {
                this.$message.success('下单成功');

                axios.get("/dianping/buy?id="+this.id).then(function (response) {


                })
            },


            pay:function () {
                this.$message.success('购买成功');

                axios.get("/dianping/pay?id="+this.id).then(function (response) {


                })
            },








            }


    })
</script>
</html>

